
<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图表容器 ref模板引用 类似于id -->
        <div ref="bottom2" style="height:150px;margin-top:10px"></div>
    </div>
</template>
<script>
//2.引入折线图构造函数
import { Area } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex';

export default {
    data() {
        return {
            title: '空中悬浮实时颗粒物',
            params: {
                page: 1,
                pageSize: 100
            },
            TempData: [],
            line: null,
            timer: null // 定时器标识
        }

    },
    computed: {
        ...mapState(['ed'])
    },
    watch: {
        ed: {
            handler(n, o) {
                //根据设备信息重新查询数据 重新渲染图表
                this.params.engineer_id = n.engineer_id;
                this.params.device_id = n.device_id;
                this.getTempData();//重新查询数字
                //根据重新获取的数据重新渲染图表
                this.area.changeData(this.tempData);
            },
            deep: true
        }
    },
    methods: {

        loadArea() {
            this.area = new Area(this.$refs.bottom2, {
                data: this.tempData,
                xField: 'insert_time',
                yField: 'tsp',
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: '#147',
                            color: "white",
                            fontSize: 20
                        }
                    }
                },
                xAxis: {
                    range: [0, 1],
                    tickCount: 5
                },
                areaStyle: () => {
                    return {
                        fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
                    };
                },
            });

            this.area.render();
        },

        // 封装方法获取后端接口的实时数据
        async getTempData() {

            let res = await get('/dashboard/pageQueryTodayData', this.params);
            console.log(res, "获取相应");
            let temp = [];
            // 将后端获取的数字

            res.data.list.forEach((item, index, arr) => {
                arr[0].tsp = 15.4,
                    // item表示数组的每一项

                    item.insert_time = moment(item.insert_time).format("HH:mm");
                if (index % 10 == 0) {
                    temp.push(arr[index])
                }
            });
            this.tempData = temp;
            if (this.area) {  // 确保图表实例已创建
                this.area.changeData(this.tempData);
            }

        },
        async refreshData() {
            await this.getTempData(); // 重新获取数据
            if (this.area) {
                this.area.changeData(this.tempData); // 更新图表
            }
        }
    },
    //最早获取dom元素的生命周期
    async mounted() {
        await this.getTempData();
        // this.loadArea();
        // 初始加载数据
        this.getTempData().then(() => {
            this.loadArea();
        });

        // 设置定时器，每30秒刷新一次（可根据需求调整时间）
        this.timer = setInterval(() => {
            this.getTempData();
        }, 3000000); // 1秒
    },
    beforeDestroy() {
        // 组件销毁时清除定时器，防止内存泄漏
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
}
</script>
<style lang="less" scoped></style>